<template>
  <section class="family-list">
    <view class="family-list__item" v-for="(item, index) in list" :key="index">
      <view class="family-list__content">
        <pane-card>
          <view slot="title">
            <view class="header">
              <text class="name">
                {{item.username}}
              </text>
              <view class="operate">
                <text class="btn del" @tap="delFamily(item.uid)">删除</text>
              </view>
            </view>

          </view>
          <view slot="subtitle">
            <view class="idcard">
              <text class="label">身份证号</text>
              <text class="content">{{item.idCard}}</text>
            </view>
            <view class="footer">
              <view class="btn" @tap="goto(`/pages/user/health?uid=${item.uid}`)">
                <view class="btn-icon success">
                  <m-icon type="eye"></m-icon>
                </view>
                <text>健康监测</text>
              </view>
              <view class="btn" @tap="goto(`/pages/user/result?uid=${item.uid}`)">
                <view class="btn-icon warning">
                  <m-icon type="info-filled"></m-icon>
                </view>
                <text>核酸检测结果</text>
              </view>
              <view class="btn">
                <view class="content" @tap="goto(`/pages/user/transfer?uid=${item.uid}`)">
                  <view class="btn-icon error">
                    <m-icon type="paperplane"></m-icon>
                  </view>
                  <text>隔离信息</text>
                  <!-- <text>转运申请</text> -->
                  <!-- <text>预计解除隔离日期</text> -->
                </view>
              </view>
            </view>
          </view>
        </pane-card>
      </view>
    </view>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
    <view class="btn-row">
      <button class="primary" type="primary" @tap="goto('/pages/family/add')">添加家人</button>
    </view>
  </section>
</template>
<script>
  import Api from '@/api/main'
  import PaneCard from '@/components/m-card/pane-card.vue';
  import VEmpty from '@/components/v-empty/index.vue';
  export default {
    components: {
      VEmpty,
      PaneCard
    },
    data() {
      return {
        showEmpty: false,
        list: [
          // {
          //   uid: 1,
          //   username: '家人1',
          //   idCard: '111'
          // },
          // {
          //   uid: 2,
          //   username: '家人1',
          //   idCard: '111'
          // }
        ]
      }
    },
    methods: {
      goto(url) {
        uni.navigateTo({
          url: url
        })
      },
      async getFamilyList() {
        const res = await this.$http.post(Api.getFamilyList)
        this.list = res || []
        this.showEmpty = !this.list.length;
        console.log('showEmpty', this.showEmpty);
        return res
      },
      addFamily() {

      },
      async delFamily(uid) {
        uni.showModal({
          title: '删除提示',
          content: '是否删除该条信息？',
          success: async res => {
            if (res.confirm) {
              console.log('用户点击确定' + uid);
              const res = await this.$http.post(Api.delFamily, { uid })
              if (res) {
                this.$toast('删除成功')
                this.getFamilyList()
              }
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }
    },
    async onShow() {
      uni.showLoading({
        title: '加载中'
      });
      await this.getFamilyList()
      uni.hideLoading();
    }
  }
</script>
<style lang="scss">
  .family-list {
    width: 100%;
    padding: 0 40rpx;

    .header {
      height: 70rpx;
      display: flex;
      justify-content: space-between;

      .btn {
        color: $uni-color-primary;
        font-weight: 400;
      }
    }

    .home {
      font-size: 38rpx;
    }

    .idcard {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      height: 80rpx;
      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
    }

    .footer {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 2.5;

        &-icon {
          width: 60rpx;
          height: 60rpx;
          font-size: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: #fff;

          &.primary {
            background-color: $uni-color-primary;
          }

          &.success {
            background-color: $uni-color-success;
          }

          &.warning {
            background-color: $uni-color-warning;
          }

          &.error {
            background-color: $uni-color-error;
          }
        }

        text {
          font-size: 26rpx;
        }
      }

      .content {
        width: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
</style>